@import 'bootstrap/bootstrap';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';

$font-primary: 'Poppins',Arial, sans-serif;
$primary: #3e64ff;

body{
	font-family: $font-primary;
	font-size: 15px;
	line-height: 1.8;
	font-weight: normal;
}
a {
	transition: .3s all ease;
	color: $primary;
	&:hover, &:focus {
		text-decoration: none !important;
		outline: none !important;
		box-shadow: none;
	}
}
button {
	transition: .3s all ease;
	&:hover, &:focus {
		text-decoration: none !important;
		outline: none !important;
		box-shadow: none !important;
	}
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
	line-height: 1.5;
	font-weight: 400;
	font-family: $font-primary;
}


.ftco-section{
	padding: 7em 0;
}

.ftco-no-pt{
	padding-top: 0;
}
.ftco-no-pb{
	padding-bottom: 0;
}
//HEADING SECTION
.heading-section{
	font-size: 32px;
	small{
		font-size: 16px;
	}
}

//COVER BG
.img{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


//OWL CAROUSEL
.owl-carousel {
	position: relative;
	.owl-item {
		opacity: 1;
		&.active {
			opacity: 1;
		}
	}
	.owl-dots {
		text-align: center;
		.owl-dot {
			width: 10px;
			height: 10px;
			margin: 5px;
			border-radius: 50%;
			background: lighten($black, 90%);
			position: relative;
			&:after{
				position: absolute;
				top: -2px;
				left: -2px;
				right: 0;
				bottom: 0;
				width: 14px;
				height: 14px;
				content: '';
				border:1px solid lighten($black, 30%);
				@include border-radius(50%);
			}	
			&:hover, &:focus{
				outline: none !important;
			}
			&.active {
				background: lighten($black, 70%);
				&:after{
					border-color: $white;
				}
			}
		}
	}
	&.home-slider {
		position: relative;
		height: 650px;
		z-index: 0;
		.slider-item {
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			height: 650px;
			position: relative;
			z-index: 0;
			@include media-breakpoint-down(lg){
				background-position: center center !important;
			}
			.overlay{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: $black;
				opacity: .3;
			}
			.slider-text {
				height: 650px;
				position: relative;
				.text{
					z-index: 0;
					color: rgba(255,255,255,.9);
				}
				h1 {
					font-size: 9vw;
					font-weight: 800;
					text-transform: uppercase;
					color: $white;
					line-height: 1;
					@include media-breakpoint-down(md) {
						font-size: 50px;
					}
				}
				h2{
					font-size: 16px;
					text-transform: uppercase;
					letter-spacing: 2px;
					font-family: $font-primary;
					font-weight: 700;
					color: rgba(255,255,255,1);
					color: #f5e4c3;
					display: inline-block;
					position: relative;
					letter-spacing: 4px;
				}
			}
		}
		.owl-nav {
			position: absolute;
			top: 50%;
			width: 100%;
			.owl-prev,
			.owl-next {
				position: absolute;
				transform: translateY(-50%);
				outline: none !important;
				@include transition(.3s);
				span {
					&:before {
						font-size: 30px;
						color: rgba(255,255,255,.5);
						@include transition(.3s);
					}
				}
				&:hover,&:focus{
					span{
						&:before{
							color: $white;
						}
					}
				}
				opacity: 0;
			}
			.owl-prev {
				left: 0;
				margin-left: 0;
			}
			.owl-next {
				right: 0;
				margin-right: 0;
			}
		}
		&:hover{
			.owl-nav{
				.owl-prev,
				.owl-next{
					opacity: 1;
				}
				.owl-prev {
					margin-left: 50px;
				}
				.owl-next {
					margin-right: 50px;
				}
			}
		}
		.owl-dots {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 40px;
			width: 100%;
			text-align: center;
			@include media-breakpoint-down(sm){
				bottom: 5px;
			}
			.owl-dot {
				width: 10px;
				height: 10px;
				margin: 5px;
				border-radius: 50%;
				background: rgba(255,255,255,.4);
				&.active {
					background: $white;
				}
			}
		}
	}
} 

.owl-carousel.owl-drag .owl-item {
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}